<!DOCTYPE html>
<html lang="en">

<head>
    <title>QSKJ_LOCAL</title>
    <script src="/Public/js/tianditu.api.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/Public/css/1.css">
    <style>
        #mapDiv {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            /* min-height: calc(100vh - 50px); */
        }

        .test1 {
            position: absolute;
            bottom: 100px;
            z-index: 450;
        }
    </style>
</head>

<body>
    <div id="mapDiv">
        <button class="test1" id="test1">test</button>
    </div>

    <script>
        var map = new T.Map("mapDiv")
        var zoom = 8;
        map.centerAndZoom(new T.LngLat(103, 30), zoom);
        
        var line = new T.Polyline([new T.LngLat(103, 35), new T.LngLat(103, 20)], {
            color: 'red'
        })
        var lg1 = new T.LayerGroup([line]);
        lg1.setZIndex('11');
        var points = []
        var points_ys = [[102, 30], [105, 30], [105, 28], [102, 28]]
        points_ys.forEach(p => {
            points.push(new T.LngLat(p[0], p[1]))
        })
        var polygon = new T.Polygon(points, {
            fillOpacity: 0.9,
            color: "rgb(15,35,11)"
        })
        polygon.addEventListener('clikc', function () {
            console.log('A')
        })
        var lg2 = new T.LayerGroup([polygon]);
        lg2.setZIndex('1');

        map.addLayer(lg1)
        map.addLayer(lg2)

        $('#test1').click(() => {
            lg1.hide();
            // map.addLayer(lg1)
            // map.addLayer(lg2)
            // lg1.setZIndex(500)
            // lg2.setZIndex(1)
            // console.log(lg1.getLayerId(line))
        })



    </script>
</body>

</html>